<template>
  <div class="order">
    <div class="title">
      <svg @click="$router.push('/own')" t="1671798247143" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="2281" width="200" height="200">
        <path d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z" p-id="2282"></path>
        <path d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z" p-id="2283"></path>
      </svg>
      <span>我的订单</span>
      <span></span>
    </div>
    <div class="action">
      <van-tabs v-model="active">
        <van-tab title="全部">

        </van-tab>
        <van-tab title="待付款">

        </van-tab>
        <van-tab title="待发货">

        </van-tab>
        <van-tab title="待收货">

        </van-tab>
        <van-tab title="待评价">

        </van-tab>
      </van-tabs>

      <MyOrderAction />
      <RecommentGoods />
    </div>
  </div>
</template>

<script>
import Vue from "vue";

import { Tab, Tabs } from "vant";

import RecommentGoods from "@/components/RecommentGoods.vue";
import MyOrderAction from "@/components/MyOrderAction.vue";
import { mapMutations, mapState } from "vuex";
Vue.use(Tab);
Vue.use(Tabs);
export default {
  components: { RecommentGoods, MyOrderAction },

  data() {
    return {
      active: 0,
      token: null,
      timeOrder: null,
    };
  },
  computed: {
    ...mapState(["orderType"]),
  },
  watch: {
    //监听点击哪一个类别的数据（全部、待付款、、、）
    active(newVal) {
      if (newVal == 0) {
        this.changeOrderType(""); //修改vuex的orderType，orderType一经修改，MyOrderAction检测到就会根据哪一个类型展示哪一个的数据
      } else if (newVal == 1) {
        this.changeOrderType("waitPay");
      } else if (newVal == 2) {
        this.changeOrderType("waitSend");
      } else if (newVal == 3) {
        this.changeOrderType("waitReceipt");
      } else if (newVal == 4) {
        this.changeOrderType("waitEvaluate");
      } else if (newVal == 5) {
        this.changeOrderType("afterSales");
      }
    },
    // orderType(newVal) {
    //   if (newVal == "") {
    //     this.active = 0;
    //   } else if (newVal == "waitPay") {
    //     this.active = 1;
    //   } else if (newVal == "waitSend") {
    //     this.active = 2;
    //   }
    // },
  },
  methods: {
    ...mapMutations(["changeOrderType", "changeOrderGoods"]),
  },
  created() {
    let waitSendOrder = JSON.parse(localStorage.getItem("confirm-pay"));
    let waitPayOrder = JSON.parse(localStorage.getItem("wait-pay"));

    //初始进入我的订单页时，根据是哪一个类型拿哪一个类型的数据
    switch (this.orderType) {
      case "":
        this.active = 0;
        this.changeOrderGoods({
          waitPay: waitPayOrder,
          waitSend: waitSendOrder,
        });
        break;
      case "waitPay":
        this.active = 1;
        this.changeOrderGoods({
          waitPay: waitPayOrder,
          waitSend: "",
        });
        break;
      case "waitSend":
        this.active = 2;
        this.changeOrderGoods({
          waitPay: "",
          waitSend: waitSendOrder,
        });
        break;
      case "waitReceipt":
        this.active = 3;
        this.changeOrderGoods({
          waitPay: "",
          waitSend: "",
        });
        break;
      case "waitEvaluate":
        this.active = 4;
        this.changeOrderGoods({
          waitPay: "",
          waitSend: "",
        });
        break;
      default:
        this.active = 5;
        this.changeOrderGoods({
          waitPay: "",
          waitSend: "",
        });
        break;
    }
  },
};
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  padding: 10rem;
  background-color: #fff;
  margin-bottom: 10rem;

  svg {
    width: 25rem;
    height: 25rem;
  }

  span {
    font-size: 16rem;
    color: #000;
    font-weight: bold;
  }
}
</style>